<template>
  <div class="lyric">
    <div class="lyriCon" :style="`height:${lyricHeight}px;${lyricMove}`">
      <!-- <div class="lyricon_conent" :style="`height:${lyricHeight}px;${lyricMove}`" > -->
      <p
        onselectstart="return false;"
        v-for="(item, index) in lyricData"
        :key="index"
        :class="{
          lyrActive:
            currentTime >= item.time && currentTime < lyricData[index + 1].time,
        }"
      >
        {{ item.text }}{{ scorll(item, index) }}
      </p>
      <!-- </div> -->
    </div>
    <!-- <div class="lyriCon" >
      <p
        v-for="(item, index) in lyricData"
        :key="index"
        
      >
        {{ item.text }}{{scorll(item,index)}}
      </p>
    </div> -->
  </div>
</template>

<script>
export default {
  name: "Lyric",
  data() {
    return {
      //   lcArr:[]
      // 高亮歌词行内样式设置
      lyricMove: "",
      time: 0,
      lyricHeight: 0,
    };
  },
  computed: {
    //歌词数据
    lyricData() {
      let data = this.$store.state.musicState.lyricData;

      this.lyricHeight = (data.length - 1) * 24 + 34;
      // console.log("this.lyricHeight ", this.lyricHeight);
      return data;
    },
    // 获取播放当前时间
    currentTime() {
      return this.$store.state.musicState.currentTime;
    },
  },
  created() {
    // console.log(this.lyricData);
    // console.log('歌词', this.$store.getters);
  },
  methods: {
    // 歌词滚动
    scorll(item, index) {
      // console.log("asdasd",item.time, typeof item.time);
      if (
        this.currentTime >= item.time &&
        this.currentTime < this.lyricData[index + 1].time
      ) {
        this.lyricMove = `transform:translateY(${-(
          34.236 * Number(index)
        )}px);`;
        // console.log(this.lyricMove)
      }
      // else if(this.currentTime == Number(this.lyricData[index + 1].time)){
      //   this.lyricMove =`transform:translateY(${- (34.236*Number(index) )}px);`
      // }
    },
  },
};
</script>

<style lang="scss" scoped>
.lyric {
  position: absolute;
  top: -500px;
  left: calc(-50% - 500px);
  height: 400px;
  width: 800px;
  overflow: hidden;
  overflow: scroll;
  text-align: center;
  //  background-color: antiquewhite;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  // 滚动不产生滚动条兼容
  // &::-webkit-scrollbar {
  //   width: 0px;
  // }
  // &::-o-scrollbar {
  //   width: 0px;
  // }
  // &::-moz-scrollbar {
  //   width: 0px;
  // }
  .lyriCon {
    display: inline-block;
    // $width800: 800px;
    // $width1200: 900px;
    // @if ($width800 < 80px) {
    //   width: 800px;
    // }
    width: 100%;
    padding: 20% 20px;
    box-sizing: border-box;

    p {
      text-align: center;
      margin: 15px 0;
      padding: 0;
      font-size: 26px;
      font-weight: bold;
      color: rgba(255, 255, 255, 0.3);
    }
    .lyrActive {
      color: rgba(255, 255, 255, 1);
      transform: scale(1.3);
    }
  }
}
</style>
